<!DOCTYPE html>
<html>
<head>
	<title>登录</title>
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta charset="utf-8">
	<link rel="stylesheet" href="../static/css/main.css">
	<script src="../static/js/vue.js"></script>
	<script src="../static/js/axios.js"></script>
	<script src="../static/js/uuid.js"></script>
	<script src="../static/js/main.js"></script>
	<script src="../static/js/TCaptcha.js"></script>
</head>
<body>
	<div class="app" id="app">
    <img class="music" :class="music_play?'music2':''" @click="music_play=!music_play" src="../static/images/player.png">
    <div class="bg">
			<img src="../static/images/bg0.jpg">
		</div>
		<div class="form">
			<div class="form-title">
				<img src="../static/images/login.png">
				<img class="back" @click="back" src="../static/images/back.png">
			</div>
			<div class="form-data">
				<div class="form-data-bg">
					<img src="../static/images/bg1.png">
				</div>
				<div class="form-item">
					<label class="text">账号</label>
					<input type="text" v-model="account" placeholder="请输入手机号/邮箱/用户名">
				</div>
				<div class="form-item">
					<label class="text">密码</label>
					<input type="password" v-model="password" placeholder="请输入密码">
				</div>
				<div class="form-item">
					<input type="checkbox" class="agree remember" v-model="agree" checked>
					<label><span class="agree_text ">记住密码，下次免登录</span></label>
				</div>
				<div class="form-item">
					<img class="commit" @click="show_captcha" src="../static/images/commit.png">
				</div>
				<div class="form-item">
					<p class="toreg" @click="game.openFrame('register','register.html')">立即注册</p>
					<p class="tofind">忘记密码</p>
				</div>
			</div>
		</div>
	</div>
	<script>
	apiready = function(){
		var game = new Game("../static/mp3/bg1.mp3");
		// 在 #app 标签下渲染一个按钮组件
		Vue.prototype.game = game;
		new Vue({
			el:"#app",
			data(){
				return {
					account: "isLjPfFBE",  // 手机号,邮箱,用户名
					password: "123456",
					agree:true,  // 是否保存登陆状态，下次免登陆
          music_play:true,
					prev:{name:"",url:"",params:{}},
					current:{name:"login",url:"login.html",params:{}},
				}
			},
			watch:{
        music_play(){
          if(this.music_play){
            this.game.play_music("../static/mp3/bg1.mp3");
          }else{
            this.game.stop_music();
          }
        }
      },
			methods:{
				show_captcha(){
					// 显示验证码
					var captcha1 = new TencentCaptcha(this.game.config.APP_ID, (res)=>{
						if(res.ret==0){
							// 验证码验证成功,返回4个数据,ret,appid,ticket和randstr
							this.loginhandle(res.ticket,res.randstr); // 提交登录数据
						}
					});
					captcha1.show(); // 显示验证码
				},
				loginhandle(ticket,randstr){
					// 登陆处理
					game.play_music('../static/mp3/btn1.mp3');  // 按钮声音
					// 验证数据
					if(this.account.length<1 || this.password.length<1){
						this.game.tips("账号或者密码不能为空！");
						return false;
					}

					// 提交获取token
					var self = this;
					this.game.post(this,{
						"method": "Users.login",
						"params": {
							"account": this.account,
							"password": this.password,
							"ticket": ticket,
							"randstr": randstr,
						},
						success(response){
							var data = response.data;
							if(data.result && data.result.errno == 1000){

								self.game.deldata(["access_token","refresh_token"]);
								self.game.delfs(["access_token","refresh_token"]);

								// 保存认证令牌
								if(self.agree){
									// 记住登陆状态
									self.game.setfs({
										'access_token':data.result.access_token,
										'refresh_token':data.result.refresh_token
									});
								}else{

									// 不记住登陆状态
									self.game.setdata({
										'access_token':data.result.access_token,
										'refresh_token':data.result.refresh_token
									});
									// 务必保证内存和文件只有其中一个地方保存了登陆状态

								}
								// 登陆成功
								api.confirm({
								    title: '魔方APP提示',
								    msg: '登陆成功',
								    buttons: ['魔方首页', '个人中心']
								}, (ret, err)=>{
								    if(ret.buttonIndex == 1){
											// 跳转到首页
											self.game.openWin("root","index.html");
										}else{
											// 跳转到个人中心
											self.game.openWin("user","user.html");
										}
								});
							}
						}
					})

				},
				back(){
					this.game.closeWin("login");
				}
			}
		})
	}
	</script>
</body>
</html>
